// 导入仓库
import {store,actions} from '../../store/index'
// 导入连接
import {connect} from 'react-redux'
// 导入布局 菜单
import { Layout, Menu} from 'antd';
// 使用状态
import React, { useState } from 'react';
// 导入导航组件
import {useNavigate}  from 'react-router-dom'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
  } from '@ant-design/icons';
// 导入子组件容器
import { Outlet } from 'react-router-dom';
// 通过布局解构局部header头部 Footer页脚，Sider侧边，Content内容
const { Header, Footer, Sider, Content } = Layout;
// 传入 标签，key，图标，子节点
// 返回 对象{key，icon，chidren，标签}
function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem('概览', 'dash', <PieChartOutlined />),
    getItem('面试题', 'interview', <DesktopOutlined />),
    getItem('订单', 'orderlist', <DesktopOutlined />),
    getItem('富文本', 'rich', <DesktopOutlined />),
    getItem('Youa', 'Youa', <DesktopOutlined />),
    getItem('User', 'sub1', <UserOutlined />, [
      getItem('Youb', 'Youb'),
      getItem('Alex', '5'),
    ]),
    getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    getItem('Files', '9', <FileOutlined />),
  ];
function Admin(props) {
    // 定义折叠和设置设置的方法 默认是false
    const [collapsed, setCollapsed] = useState(false);
    // 获取定义仓库的数据
    // 使用仓库中num来初始化 count
    // import {store} from '../../store/index'
    const [count,setCount] = useState(store.getState().num);
    // 监听store变化更新count
    store.subscribe(()=>{
      setCount(store.getState().num)
    })
    const navigate = useNavigate();
    const menuClick = e=>{
        console.log("e",e);
        var pathname = '/admin/'+e.keyPath.reverse().join("/");
        navigate(pathname);
    }
    return ( <Layout style={{height:"100vh"}}>
        {/* collapsible  可折叠的，触发折叠按钮为null 默认是不折叠  当折叠执行  */}
        <Sider  collapsible trigger={null}   collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
            {/* 主题 暗色，默认选择key 1   默认行内，items菜单项 */}
         <Menu  onClick={menuClick} theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
        <Layout>
          <Header style={{backgroundColor:"#fff",display:"flex"}}>             
            {/* 通过react创建一个元素，节点根据是否折叠返回不同的图表，类名是trigger 单击切换折叠 */}
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed),
            })}
            <button>{count}</button>
            {/* 通过props获取num ，dnum，用户信息|头像 */}
             <p>{props.num} | </p>
             <p>{props.dnum}| </p>
             <p>{props.user.name}| </p>
             <p><img src={props.user.avatar} alt="" width="100"></img></p>
             <p>{props.user.score}</p>     
          </Header>
          <Content style={{margin:"16px",backgroundColor:"#fff"}}> <Outlet></Outlet></Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout> );
}
// 在这个也可以对state的数据进行计算dnum是num2倍
const mapStateToProps = state=>({...state,dnum:state.num*2});
const mapDispatchToProps = actions


// 导出连接后的Admin
export default connect(mapStateToProps,mapDispatchToProps)(Admin);
 
//  顶部导入以下
// import {store,actions} from '../../store/index' 
// import {connect} from 'react-redux'